<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <script src="./vue.global.js"></script>
    <link rel="stylesheet" href="./index.css" />
    <link rel="stylesheet" href="./table.css" />
    <link rel="stylesheet" href="./pugong.css" />
    <link rel="stylesheet" href="./utils.css" />
    <script src="./index.full.js"></script>

    <script>
      //适配代码
      (function (doc, win) {
        var docEI = doc.documentElement,
          resizeEvt = "orientationchange" in window ? "orientataionchange" : "resize",
          recalc = function () {
            var clientWidth = docEI.clientWidth;
            if (!clientWidth) return;
            //100是字体大小，1536是开发时浏览器窗口的宽度，等比计算
            docEI.style.fontSize = 100 * (clientWidth / 1536) + "px";
          };

        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener("DOMContentLoaded", recalc, false);
      })(document, window);
    </script>
    <style>
      * {
        /* margin: 0;
        padding: 0; */
        font-size: 0.2rem;
      }

      .w350px {
        width: 350px;
      }
    </style>
  </head>

  <body>
    <div id="app" class="table-content text-left">
      <h3 class="text-center mb-20" style="font-size: 0.25rem">本人持卡承诺书</h3>

      <div style="font-size: 20px">
        <div class="danger-info">
          本人<el-input v-model="cardForm.name" class="width-100 border_bottom_1" placeholder=" "></el-input> 身份证号：<el-input v-model="cardForm.idCard" class="w350px border_bottom_1" placeholder=" "></el-input>， 银行卡号：<el-input v-model="cardForm.bankNumber" class="w350px border_bottom_1" placeholder=" "></el-input>， 开户行<el-input v-model="cardForm.openingBank" class="width-250 border_bottom_1" placeholder=" "></el-input>，
          本人承诺上述工资卡由<el-input v-model="cardForm.name" class="width-250 border_bottom_1" placeholder=" "></el-input>
          保管，委托中铁九局集团有限公司盐宜铁路站前施工10标段项目经理部代发本人民工工资，今后出现任何 经济纠纷与中铁九局集团有限公司盐宜铁路站前施工10标段项目经理部无任何关联。
        </div>
      </div>

      <div style="font-size: 24px; font-weight: 500" class="mb-20">附件：本人身份证、本人银行卡复印件。</div>

      <div class="flex" style="justify-content: space-evenly">
        <div class="flex-center" style="margin-bottom: 30px">
          <img :src="cardForm.idCardFronts" style="height: 1.6rem" alt="" />
        </div>
        <div class="flex-center" style="margin-bottom: 50px">
          <img :src="cardForm.idCardOpposites" style="height: 1.6rem" alt="" />
        </div>
      </div>

      <div class="flex" style="justify-content: space-evenly">
        <div class="flex-center" style="margin-bottom: 30px">
          <img :src="cardForm.bankFronts" style="height: 1.6rem" alt="" />
        </div>
        <div class="flex-center" style="margin-bottom: 50px">
          <img :src="cardForm.bankOpposites" style="height: 1.6rem" alt="" />
        </div>
      </div>

      <div class="d-flex flex-row mt-2 justify-content-end" style="margin-bottom: 40px">
        <div class="flex" style="padding-right: 80px">
          <div @click="setUpEquipment('cardForm.promiseSign','TaskSignFinger')">承诺人（签字并加按指印）：</div>
          <el-image v-show="cardForm.promiseSign" class="sign_img" :src="cardForm.promiseSign" fit="fill"></el-image>
        </div>
      </div>

      <div class="d-flex flex-row mt-2 justify-content-end">
        承诺日期：
        <el-input v-model="cardForm.promiseDate" class="people-input" placeholder=" " style="width: 2rem"></el-input>
        <!-- 年
        <el-input v-model="cardForm.month" class="people-input" placeholder=" " style="width: 0.5rem"></el-input>
        月
        <el-input v-model="cardForm.day" class="people-input" placeholder=" " style="width: 0.5rem"></el-input>
        日 -->
      </div>
    </div>
    <script>
      const { createApp, reactive, toRefs, ref, onMounted } = Vue;
      const vue3Composition = {
        setup() {
          const cardForm = ref({
            // year: "",
            // month: "",
            // day: "",
            name: "",
            idCard: "",
            bankNumber: "",
            openingBank: "",
            // name2: "",
            promiseSign: "", //承诺人
            promiseDate: "", //承诺日期
            idCardFronts: "", //身份证正面
            idCardOpposites: "", //身份证反面
            bankFronts: "", //银行卡反面
            bankOpposites: "", //银行卡反面
          });

          window.setSign = (event) => {
            cardForm.value[event.key] = event.img;
          };

          window.getData = (event) => {
            return cardForm.value;
          };
          window.setData = (data) => {
            cardForm.value.name = data.name;
            cardForm.value.idCard = data.idCard;
            cardForm.value.bankNumber = data.bankNumber;
            cardForm.value.openingBank = data.openingBank;
            cardForm.value.promiseDate = data.year + "-" + data.month + "-" + data.day;
            cardForm.value.idCardFronts = data.idCardFronts;
            cardForm.value.idCardOpposites = data.idCardOpposites;
            cardForm.value.bankFronts = data.bankFronts;
            cardForm.value.bankOpposites = data.bankOpposites;
          };

          //peopleForm.sign
          const setUpEquipment = (key, type) => {
            window.parent.childListener({
              key,
              type,
            });
          };
          return {
            cardForm,
            setUpEquipment,
          };
        },
      };
      const app = createApp(vue3Composition).use(ElementPlus).mount("#app");
    </script>
  </body>
</html>
